// FILTER USERS
// ===============================================

$(".user-search input[name='search']").change(function() {
  filterUsers($(this).val());
  return false;
}).keyup(function() {
  $(this).change();
});

// add basic functionality
// ===============================================

$(".section-left .non-invited .user").click(function() {
    addUser($(this));
});
$(".section-right .invited .user").click(function() {
    delUser($(this));
});

// ====================================================================================
// methods
// ====================================================================================

// get selected users
// ===============================================

function selected() {
  alert($(".section-right .invited"));
}

// add users
// ===============================================

function addUser(user) {

    var id = user.data("user");
    var imagen = user.find("img").attr("src");
    var nombre = user.find(".name").text();

    
    user.remove();


    var li = $('<span>').attr({ "class": "user", "data-user": id }).click(function() { delUser($(this)); });
    var icon = $('<span>').attr("class", "glyphicon glyphicon-remove");
    var img = $('<img>').attr("src", imagen);
    var name = $('<span>').attr("class", "name").text(nombre);

    //icon.appendTo(li);
    img.appendTo(li);
    name.appendTo(li);

    li.insertBefore(".section-right .invited .end");
  
}

// delete USUARIOS
// ===============================================

function delUser(user) {

    var id = user.data("user");
    var image = user.find("img").attr("src");
    var name = user.find(".name").text();

    user.remove();

    var li = $('<span>').attr({"class": "user","data-user": id }).click(function() { addUser($(this)); });

    var icon = $('<span>').attr("class", "glyphicon glyphicon-plus");
    var img = $('<img>').attr("src", image);
    var name = $('<span>').attr("class", "name").text(name);

    //icon.appendTo(li);
    img.appendTo(li);
    name.appendTo(li);

    li.insertBefore(".section-left .non-invited .end");
}

// filter users
// ===============================================

jQuery.expr[':'].Contains = function(a, i, m) { 
  return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

function filterUsers(name) {
  var lista = $(".section-left .non-invited");

  if (name) {
    lista.find(".name:not(:Contains(" + name + "))").closest(".user").hide();
    lista.find(".name:Contains(" + name + ")").closest(".user").show();
  } else {
    lista.find(".user").show();
  }
}